import React from 'react';
import { Spin, Card, Skeleton } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';

// 自定义加载图标
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;

// 全屏加载组件
export const FullPageLoading = ({ tip = '加载中...' }) => {
  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      zIndex: 9999
    }}>
      <Spin indicator={antIcon} size="large" tip={tip} />
    </div>
  );
};

// 页面内容加载组件
export const PageLoading = ({ tip = '加载中...', style = {} }) => {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '200px',
      ...style
    }}>
      <Spin indicator={antIcon} size="large" tip={tip} />
    </div>
  );
};

// 卡片加载组件
export const CardLoading = ({ title, rows = 4, avatar = false }) => {
  return (
    <Card>
      <Skeleton
        loading={true}
        avatar={avatar}
        title={!!title}
        paragraph={{ rows }}
        active
      />
    </Card>
  );
};

// 表格加载组件
export const TableLoading = ({ columns = 4, rows = 5 }) => {
  return (
    <div>
      {Array.from({ length: rows }, (_, index) => (
        <div key={index} style={{ marginBottom: '16px' }}>
          <Skeleton.Input
            style={{ width: '100%', height: '40px' }}
            active
            size="default"
          />
        </div>
      ))}
    </div>
  );
};

// 按钮加载组件
export const ButtonLoading = ({ loading, children, ...props }) => {
  return (
    <Spin spinning={loading} indicator={antIcon}>
      {children}
    </Spin>
  );
};

// 内容区域加载组件
export const ContentLoading = ({ loading, children, tip = '加载中...' }) => {
  if (loading) {
    return <PageLoading tip={tip} />;
  }
  return children;
};

// 默认导出页面加载组件
const LoadingSpinner = PageLoading;
export default LoadingSpinner;